<template>
  <div class="wrapper">
    <v-header/>
    <v-sidebar></v-sidebar>
    <!--<router-view></router-view>-->
    <!--当collapse 为true的时候就加入content-collapse的属性-->
    <div class="content-box":class="{'content-collapse':collapse}">
      <div class="content">
        <transition name="move" model="out-in">
          <router-view></router-view>
        </transition>
      </div>
    </div>
  </div>

</template>

<script>

    import vHeader from '../components/Header.vue';
    import vSidebar from '../components/Sidebar';
    export default {
        name: "Home",
        data(){
            return {
                collapse :false,
            }
        },
        components:{
            vHeader,
            vSidebar,

        },methods:{


        },
        // created当实例生成的时候会回调created这个方法，监听消息如果有发送那么这个时候就会去接收到
        /*
        * 订阅消息，当收到了消息的时候需要做出什么样的处理回调。
        * */
        created(){
            this.$bus.on("collapse-conetent",msg =>{
                this.collapse =msg;
                /*让主页面来处理这个折叠的消息*/
            })
        },
        //当前实例销毁
        beforeDestroy(){
            this.$bus.off('collapse-conetent',msg =>{
                this.collapse =msg;
                /*让主页面来处理这个折叠的消息*/
            })
        }
    }
</script>

<style scoped>

</style>y


